<template>

<el-card>
    <div style="width:500px; height:400px; float:left; display:inline">
         
      <el-card :body-style="{ padding: '0px' }">
         <img
          src="../images/cat.png"
          class="image"
        />
      </el-card>
    </div>
    <div style="width:100px; height:100px; float:left; display:inline">

    </div>
     <div style="width:200px;height:50px;float:top;display:inline"></div>
    <div style="width:200px; height:200px; float:left; display:inline">
          <h1>{{itemId}}</h1><br>
          <span>Product:{{productId}}</span><br>
          <span>ListPrice:{{listPrice}}</span>
          <div class="bottom">
            <el-button type="text" class="button" @click="addToCart(itemId)">Add to cart</el-button>
          </div>      
    </div>
  </el-card>
</template>


<script >
import { ref } from 'vue'
import axios from "axios";
var itemDetailStr=window.sessionStorage.getItem('itemDetail');

var itemDetail=JSON.parse(itemDetailStr);
var usernameItem = window.sessionStorage.getItem('username');
console.log(usernameItem);

/* var userForitemStr = window.sessionStorage.getItem('userForitem');
var userForitem=JSON.parse(userForitemStr); */
const currentDate = ref(new Date())
export default{
    name:"itemDetail",
    
    data(){
        return{
          itemId:itemDetail.itemId,
          productId:itemDetail.productId,
          listPrice:itemDetail.listPrice
        }
    },
    
    methods:{
        /*  getItemDetail(itemId){
            return axios.get("/item/getItem/"+itemId);
         } */
         addToCart(itemId){
            var username = usernameItem;
            var totalPrice = 0.00;
            var carts = new Array();
            axios({
            method : 'POST',
            url : "account/"+usernameItem+"/cart/"+itemDetail.itemId,
            params : {
                quantity : "1",
            } ,
            data : {
                id : "",
                username : "",
                itemId : "",
                quantity : "",
                price : ""
            }
        }).then(Response => {
            carts.splice(0, carts.length);
            totalPrice = 0.00;
            for(var i = 0; i < Response.data.data.length; i++)
            {
                Response.data.data[i].quantity = Number(Response.data.data[i].quantity);
                carts.push(Response.data.data[i]);
                totalPrice += Response.data.data[i].price;
            }
            window.sessionStorage.removeItem('carts');
            window.sessionStorage.setItem("carts", JSON.stringify(carts));
            window.sessionStorage.setItem("totalPrice", String(totalPrice));
            window.location.href="http://localhost:3000/cart"
            })
        }
    }
  
}

</script>

<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: auto;
  height: auto;
  display: inline;
}

</style>
